<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
<style>
 /* 设置整个页面的字体和边距 */
 body {
  font-family: Arial, sans-serif; /* 使用Arial字体，如果没有则使用无衬线字体 */
  margin: 0; /* 移除默认的边距 */
  padding: 0; /* 移除默认的内边距 */
}

/* 头部区域样式 */
.header {
  background-color: #f8f8f8; /* 背景颜色 */
  padding: 10px; /* 内边距 */
  display: flex; /* 使用弹性盒子布局 */
  justify-content: space-between; /* 子项分散对齐 */
  align-items: center; /* 子项垂直居中 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
}

/* Logo区域样式 */
.logo {
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 子项垂直居中 */
}

/* Logo图片样式 */
.logo img {
  height: 40px; /* 图片高度 */
  margin-right: 10px; /* 图片右侧外边距 */
}

/* 搜索栏样式 */
.search-bar {
  flex-grow: 1; /* 允许搜索栏占据额外空间 */
  margin: 0 20px; /* 左右外边距 */
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 子项垂直居中 */
}

/* 搜索栏输入框样式 */
.search-bar input[type="text"] {
  padding: 10px; /* 内边距 */
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 4px; /* 边框圆角 */
  width: 100%; /* 宽度100% */
}

/* 搜索栏按钮样式 */
.search-bar button {
  padding: 10px; /* 内边距 */
  margin-left: 10px; /* 左侧外边距 */
  background-color: #ffd700; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标手型 */
}

/* 导航菜单样式 */
.nav {
  display: flex; /* 使用弹性盒子布局 */
  list-style: none; /* 无列表样式 */
}

/* 导航菜单项样式 */
.nav li {
  margin: 0 15px; /* 左右外边距 */
}

/* 导航菜单链接样式 */
.nav li a {
  text-decoration: none; /* 无下划线 */
  color: #333; /* 文字颜色 */
}

/* 导航菜单按钮样式 */
.nav button {
  padding: 10px; /* 内边距 */
  margin-left: 10px; /* 左侧外边距 */
  background-color: #ffd700; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标手型 */
}

/* 导航栏样式 */
.navbar {
  background-color: #f8f8f8; /* 背景颜色 */
  padding: 10px; /* 内边距 */
  display: flex; /* 使用弹性盒子布局 */
  justify-content: space-around; /* 子项平均分布 */
  align-items: center; /* 子项垂直居中 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
}

/* 导航栏链接样式 */
.navbar a {
  text-decoration: none; /* 无下划线 */
  color: #333; /* 文字颜色 */
  padding: 10px; /* 内边距 */
}

/* 导航栏链接悬停样式 */
.navbar a:hover {
  background-color: #e0e0e0; /* 鼠标悬停时背景颜色 */
}

/* 导航栏激活链接样式 */
.navbar a.active {
  background-color: #ffd700; /* 激活时背景颜色 */
  color: #333; /* 文字颜色 */
}
  /* 侧边栏容器样式 */
.sidebar {
  width: 60px; /* 侧边栏宽度 */
  background-color: #f8f8f8; /* 侧边栏背景颜色 */
  position: fixed; /* 固定定位 */
  top: 80px; /* 距离顶部80px */
  height: calc(100% - 80px); /* 高度为视口高度减去80px */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 子项水平居中 */
}

/* 侧边栏链接样式 */
.sidebar a {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 宽度100% */
  height: 60px; /* 高度60px */
  text-decoration: none; /* 去除下划线 */
  color: #333; /* 文字颜色 */
  margin: 5px 0; /* 上下外边距为5px */
}

/* 侧边栏链接悬停样式 */
.sidebar a:hover {
  background-color: #e0e0e0; /* 鼠标悬停时背景颜色 */
}

/* 侧边栏激活链接样式 */
.sidebar a.active {
  background-color: #ffd700; /* 激活时背景颜色 */
}

/* 侧边栏图片样式 */
.sidebar img {
  width: 24px; /* 图片宽度 */
  height: 24px; /* 图片高度 */
  margin-right: 10px; /* 图片右侧外边距 */
}
 /* 车辆类型容器样式 */
.vehicle-types-container {
  text-align: center; /* 文字居中对齐 */
  margin-top: 20px; /* 与上一个元素保持20px的距离 */
}

/* 车辆类型列表样式 */
.vehicle-types {
  display: inline-flex; /* 内联弹性盒子布局 */
  list-style: none; /* 移除列表的默认样式 */
  padding: 0; /* 移除内边距 */
}

/* 车辆类型列表项样式 */
.vehicle-types li {
  margin-right: 20px; /* 右侧保持20px的距离 */
  text-align: center; /* 文字居中对齐 */
}

/* 车辆类型图片样式 */
.vehicle-types img {
  width: 85px; /* 图片宽度 */
  height: 40px; /* 图片高度 */
}

/* 车辆类型名称样式 */
.vehicle-types span {
  display: block; /* 块级元素显示，使其占据整行 */
  margin-top: 5px; /* 与图片保持5px的距离 */
}

/* 选择车辆容器样式 */
.select-vehicle {
  margin: 20px; /* 四周保持20px的距离 */
  text-align: center; /* 文字居中对齐 */
}

/* 选择车辆下拉框和按钮样式 */
.select-vehicle select,
.select-vehicle button {
  padding: 5px; /* 内边距为5px */
  margin-right: 10px; /* 右侧保持10px的距离 */
}
  /* 类别容器样式 */
.categories {
  display: flex; /* 使用弹性盒子布局 */
  flex-wrap: wrap; /* 允许子项换行 */
  margin-top: 20px; /* 与上一个元素保持20px的距离 */
}

/* 类别容器中的每个类别项样式 */
.categories div {
  width: 25%; /* 每个类别项宽度为容器宽度的25% */
  padding: 10px; /* 内边距 */
  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
  text-align: center; /* 文字居中对齐 */
  border: 1px solid #e0e0e0; /* 边框颜色和样式 */
  margin-bottom: 10px; /* 与下一个元素保持10px的距离 */
}

/* 类别项中的链接样式 */
.categories div a {
  text-decoration: none; /* 去除下划线 */
  color: #333; /* 文字颜色 */
}

/* 类别项中的链接悬停样式 */
.categories div a:hover {
  color: #ffd700; /* 鼠标悬停时的文字颜色 */
}

/* 品牌Logo容器样式 */
.brand-logos {
  display: flex; /* 使用弹性盒子布局 */
  justify-content: space-around; /* 子项平均分布 */
  margin-top: 20px; /* 与上一个元素保持20px的距离 */
}

/* 品牌Logo样式 */
.brand-logo {
  width: 50px; /* 宽度 */
  height: 50px; /* 高度 */
  border-radius: 50%; /* 边框圆角，形成圆形 */
  background-color: #f0f0f0; /* 背景颜色 */
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin: 0 10px; /* 左右保持10px的距离 */
}
/* 设置Swiper容器的宽度和高度 */
.swiper{
            width: 1200px;
            height: 500px;
        }
        /* 设置Swiper-wrapper的相对定位 */
        .swiper .swiper-wrapper{
            position: absolute; /* 使用绝对定位 */
            right: 0; /* 将Swiper-wrapper放置在其父元素的右侧 */
        }
        /* 设置Swiper-wrapper中的图片填满容器 */
        .swiper .swiper-wrapper img{
            width: 100%;
            height: 100%;
        }
        /* 设置Swiper-wrapper中的段落标签样式，用于显示标题 */
        .swiper .swiper-wrapper p{
            position: absolute;
            left: 0;
            margin: 0;
            bottom: 0;
            width: 100%;
            height: 35px;
            line-height: 35px;
            font-size: 20px;
            color: #fff;
            text-align: center;
            background-color: rgba(0,0,0,.5);
            font-weight: bold;
            letter-spacing: 2px;/* 字间距 */
            text-overflow: ellipsis;/* 溢出隐藏为点 */
            overflow: hidden;
            white-space: nowrap;
        }
        /* 设置水平Swiper的分页器位置 */
        .swiper-horizontal>.swiper-pagination{
            bottom: 40px;/* 分页器的盒子位置 */
        }
        /* 设置具体的分页点样式 */
        .swiper-pagination-bullet{/* 具体的点 */
            border: 3px solid #fff;
            background-color: #fff;
            border-radius: 0;/* 去除圆角，使其成为长方形 */
        }
        .swiper-pagination{
            text-align: right;
            right: 0;
        }
        /* 设置Swiper的左右箭头样式 */
        .swiper-button-next,.swiper-button-prev{
            width: 50px;
            height: 50px;
            color: #fff;
            background-color:rgba(0,0,0,.5);
            /* 宽高背景左右箭头 */
    
            font-size: 30px;
            text-align: center;
            line-height: 50px;/* 箭头本身的大小 */
        }
        /* 设置右箭头的位置 */
        .swiper-button-next{
            right: 0;/* 右箭头位置 */
        }
        /* 设置左箭头的位置 */
        .swiper-button-prev{
            left: 0;/* 左箭头位置 */
        }
/* 图片列表容器样式 */
.book-list {
  
  display: flex; /* 使用弹性盒子布局 */
  flex-wrap: wrap; /* 允许子项换行 */
  justify-content: space-between; /* 项目之间的间距均匀分布 */
  list-style: none; /* 移除列表的默认样式 */
  padding: 0; /* 移除内边距 */
  margin: 0; /* 移除外边距 */
}

/* 图片列表中的每个书籍项样式 */
.book-item {
  max-width: 50%; /* 最大宽度为容器的50% */
  flex: 0 0 calc(25% - 20px); /* 每个项目占据25%的宽度，减去间距 */
  margin: 10px; /* 条目之间的间距 */
  box-sizing: border-box; /* 包括padding和border在内的总宽度 */
  text-align: center; /* 居中对齐文本 */
}

/* 图片项中的图片样式 */
.book-item img {
  max-width: 100%; /* 图片最大宽度为容器宽度 */
  height: auto; /* 图片高度自动 */
  border-radius: 30px; /* 边框圆角 */
}

/* 图片列表中的图片样式 */
.book-item img {
  max-width: 100%; /* 图片最大宽度为容器宽度 */
  height: 80%; /* 图片高度为容器高度的80% */
  border-radius: 30px; /* 边框圆角 */
}

/* 图片项中的段落样式 */
.book-item p {
  margin: 5px 0; /* 上下外边距为5px */
}
</style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="./img/logo.png" >
            <a href="http://www.dongchedi.com">懂车帝</a> 
            <select>
                <option>大连</option>
                <option>鞍山</option>
                <option>阜新</option>
                <option>葫芦岛</option>
                <option>沈阳</option>
            </select>
        </div>
        <div class="search-bar">
            <input type="text" placeholder="奔驰">
            <button>搜索</button>
        </div>
        <ul class="nav">
            <li><a href="#">业务合作</a></li>
            <li><a href="#">添加到桌面</a></li>
            <li><a href="#">小程序</a></li>
            <li><a href="#">下载App</a></li>
            <li><a href="#">发布作品</a></li>
            <li><a href="register.html"><button>登录</button></a></li>
        </ul>
    </div>
    <div class="sidebar">
          <a href="./INDEX.html" class="active">
            <img src="./img/homepage.png" >
            <span>首页</span>
        </a>
        <a href="./detail.html">
            <img src="./img/selection.png" >
            <span>选车</span>
        </a>
        <a href="#">
            <img src="./img/used.png">
            <span>二手车</span>
        </a>
        <a href="#">
            <img src="./img/video.png">
            <span>视频</span>
        </a>
        <a href="#">
            <img src="./img/advice.png">
            <span>资讯</span>
        </a>
        <a href="#">
            <img src="./img/circle.png">
            <span>车友圈</span>
        </a>
        <a href="Ranking list.html">
            <img src="./img/the charts.png">
            <span>排行榜</span>
        </a>
        <a href="#">
            <img src="./img/broadcast.png">
            <span>直播</span>
        </a>
        <a href="#">
            <img src="./img/tool.png">
            <span>工具</span>
        </a>
        <a href="register.html">
            <img src="./img/my.png">
            <span>我的</span>
        </a>
        <a href="#">
          <img src="./img/tool2.png" >
          <span>反馈</span>
      </a>
    </div>
    <div class="vehicle-types-container">
        <div class="vehicle-types">
            <li><img src="./img/new energy.png"><span>新能源</span></li>
            <li><img src="./img/car.png"><span>轿车</span></li>
            <li><img src="./img/suv.png"><span>SUV</span></li>
            <li><img src="./img/mpv.png"><span>MPV</span></li>
            <li><img src="./img/sports cat.png"><span>跑车</span></li>
            <li><img src="./img/pickup.png"><span>皮卡</span></li>
            <li><img src="./img/micro-facet.png"><span>微面</span></li>
            <li><img src="./img/microcard.png.png"><span>微卡</span></li>
            <li><img src="./img/weike.png"><span>轻客</span></li>
        </div>
    </div>
    <div class="select-vehicle">
        <button>新车</button>
        <button>新能源</button>
        <select name="brand">
            <option value="">选择品牌/车系</option>
            <option value="">日系</option>
            <option value="">东风</option>
        </select>
        <select name="model">
            <option value="">选择车型</option>
            <option value="">跑车</option>
            <option value="">轿车</option>
        </select>
        <button>选车</button>
    </div>
    <div class="navbar">
        <a href="./detail.html" class="active">热门</a>
        <a href="#">国产</a>
        <a href="#">德系</a>
        <a href="#">日系</a>
        <a href="#">二手车</a>
        <a href="#">10万以下</a>
        <a href="#">10-15万</a>
        <a href="#">15-25万</a>
        <a href="#">25-35万</a>
        <a href="#">35-50万</a>
        <a href="#">50万以上</a>
    </div>
    <div class="container">
    <div class="categories">
        <div><a href="one.html">道奇地狱猫</a></div>
        <div><a href="two.html">雪佛兰科迈罗</a></div>
        <div><a href="eight.html">小米SU7</a></div>
        <div><a href="seven.html">雅阁</a></div>
        <div><a href="four.html">大众迈腾</a></div>
        <div><a href="three.html">福特野马</a></div>
        <div><a href="six.html">理想L6</a></div>
        <div><a href="five.html">哈弗</a></div>
    </div>
    </div>
    <div class="brand-logos">
        <div class="brand-logo">小米汽车</div>
        <div class="brand-logo">奔驰</div>
        <div class="brand-logo">大众</div>
        <div class="brand-logo">奥迪</div>
        <div class="brand-logo">宝马</div>
        <div class="brand-logo">沃尔沃</div>
        <div class="brand-logo">坦克</div>
        <div class="brand-logo">本田</div>
        <div class="brand-logo">丰田</div>
    </div>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./img/1.webp" >
          <p>东风本田</p>
        </div>
        <div class="swiper-slide">
          <img src="./img/2.webp" >
          <p>二代哈佛H9</p>
        </div>
        <div class="swiper-slide">
          <img src="./img/3.webp" >
          <p>新款保时捷911</p>
        </div>
        <div class="swiper-slide">
          <img src="./img/4.webp" >
          <p>长安马自达</p>
        </div>
        <div class="swiper-slide">
          <img src="./img/5.webp" >
          <p>铃木吉姆尼越野版</p>
        </div>
      </div>
      <div class="swiper-button-next"></div><!-- 右箭头 -->
    <div class="swiper-button-prev"></div><!-- 左箭头 -->
    <div class="swiper-pagination"></div><!-- 点 -->
  </div>

  <script src="./swiper/swiper-bundle.min.js"></script>

  <script>
      var swiper = new Swiper(".swiper", {
          direction:'horizontal',/* 水平切换，垂直使用vertical */
          loop:true,/* 循环模式选项 */
        autoplay: {
          delay: 2000/* 幻灯片切换时间2000毫秒 */
        },
        pagination: {
          el: ".swiper-pagination",/* 分页器 */
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
    <ul class="book-list">
      <li class="book-item">
         <img src="./img/1.jpg" >
         <p>惊爆价</p>
         <p>¥53000</p>
     </li>
     <li class="book-item">
      <img src="./img/2.jpg" alt="Book 2">
         <p>惊爆价</p>
         <p>¥78000</p>
     </li>
     <li class="book-item">
     <img src="./img/3.jpg">
     <p>惊爆价</p>
     <p>¥96500</p>
     </li>
     <li class="book-item">
     <img src="./img/4.jpg" >
     <p>惊爆价</p>
     <p>¥78300</p>
     </li>
        <li class="book-item">
        <img src="./img/public.jpg" >
        <p>惊爆价</p>
        <p>¥789000</p>
      </li>
      <li class="book-item">
          <img src="./img/tesla.jpg" >
          <p>惊爆价</p>
          <p>¥389000</p>
      </li>
      <li class="book-item">
          <img src="./img/bmw.jpg" >
          <p>惊爆价</p>
          <p>¥989000</p>
      </li>
      <li class="book-item">
          <img src="./img/harvard.jpg" >
          <p>惊爆价</p>
          <p>¥89000</p>
      </li>
 </ul>
 </div>
  </body>
  </html>